<template>
  <div class="modal-demo">
    <h3 class="title">基础调用</h3>
    <div>
      <d-button @click="opened=true">Vue调用modal</d-button>
      <d-modal v-model="opened">
        <div slot="header">Vue</div>
        <div>这是使用vue调用的弹出框</div>
        <div slot="footer">
          <d-button @click="opened = false">取消</d-button>
        </div>
      </d-modal>
    </div>
    <h3 class="title">Modal参数</h3>
    <div>
      <div class="form-list">
        <div class="form-item">
          <span class="form-label">点击遮罩可否关闭</span>
          <d-switch small v-model="params.closeOnMask">closeOnMask</d-switch>
        </div>
        <div class="form-item">
          <span class="form-label">全屏</span>
          <d-switch small v-model="params.fullScreen" @change="revert('middle', 'height')">fullScreen</d-switch>
        </div>
        <div class="form-item">
          <span class="form-label">关闭icon</span>
          <d-switch small v-model="params.hasCloseIcon">hasCloseIcon</d-switch>
        </div>
        <div class="form-item">
          <span class="form-label">垂直居中</span>
          <d-switch small v-model="params.middle" @change="revert('fullScreen', 'height')">middle</d-switch>
        </div>
        <div class="form-item">
          <span class="form-label">有遮罩</span>
          <d-switch small v-model="params.hasMask" @change="revert('height')">hasMask</d-switch>
        </div>
        <div class="form-item">
          <span class="form-label">有分割线</span>
          <d-switch small v-model="params.hasDivider">hasDivider</d-switch>
        </div>
        <div class="form-item">
          <span class="form-label">测试超长弹框</span>
          <d-switch small v-model="height" @change="revert('fullScreen', 'middle', 'hasMask')"></d-switch>
        </div>
      </div>
      <d-button @click="opened2=true">Vue调用modal</d-button>
      <d-modal v-model="opened2" v-bind="params">
        <div slot="header">Vue</div>
        <div :style="{'height': height ? '800px': 'auto'}">
          <div>这是Vue自定义的弹出框</div>
          <div>
            <d-select v-model="select" :datas="selectParam"></d-select>
          </div>
        </div>
        <div slot="footer">
          <d-button @click="close2">取消</d-button>
          <d-button color="primary" @click="confirm2">确定</d-button>
        </div>
      </d-modal>
    </div>
  </div>
</template>

<script>
const DEFAULT_VALUE = {
  closeOnMask: true,
  fullScreen: false,
  middle: false,
  hasMask: true,
  hasDivider: false,
  hasCloseIcon: false
}

export default {
  name: 'modalDemo',
  data () {
    return {
      params: {
        ...DEFAULT_VALUE
      },
      height: false,
      opened: false,
      opened2: false,

      select: null,
      selectParam: ['选择1', '选择2', '选择3']
    }
  },
  methods: {
    revert (...keys) {
      for (const key of keys) {
        if (key === 'height') {
          this.height = false
        } else {
          this.params[key] = DEFAULT_VALUE[key]
        }
      }
    },
    confirm2 () {
      alert('点击确定了。')
      this.close2()
    },
    close2 () {
      this.opened2 = false
    }
  }
}
</script>

<style lang="stylus" scoped>
.modal-demo
  .form-list
    margin-bottom 7px
    .form-item
      margin-bottom 12px
      .form-label
        margin-right 7px
</style>
